<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>学员信息表</title>
	<link rel="stylesheet" href="index.css"> </head>

<body>
	<div class="container">
		<div class="top">
			<h1>学员信息表</h1>
			<p>1804</p>
		</div>
		<div class="add">
			<p class="addp">添加</p>
			<input type="text" class="n" placeholder="姓名">
			<select name="" id="s">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<input type="number" class="a" placeholder="年龄">
			<button id="btn">添加</button>
		</div>
		<div class="box">
		 	<p class="lie">列表</p>
		 	<div class="biao">
		 		<span>姓名</span>
		 		<span>性别</span>
		 		<span>年龄</span>
		 	</div> 
			<ul id="list"> </ul>
		</div>
	</div>
	<script>
		function loadXMLDoc() {
			var xmlhttp;
			if (window.XMLHttpRequest) {
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			}
			else {
				// IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function () {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
					var json = JSON.parse(xmlhttp.responseText)
//					var json=json.reverse()
					console.log(json.data)
					json.data=json.data.reverse()
					for (let i = 0; i < json.data.length; i++) {
						var li = document.createElement("li")
						var span = document.createElement("span")
						span.innerHTML = json.data[i].studentName
						var span1 = document.createElement("span")
						span1.innerHTML = json.data[i].sex
						var span2 = document.createElement("span")
						span2.innerHTML = json.data[i].age
						li.appendChild(span)
						li.appendChild(span1)
						li.appendChild(span2)
							//						console.log(li)
						document.querySelector("#list").appendChild(li)
					}
				}
			}
			xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student/index", true);
			xmlhttp.send();
		}
		loadXMLDoc()
		document.querySelector("#btn").addEventListener('click', function () {
			//			console.log(1)
			var n = document.querySelector(".n").value
			var s = document.querySelector("#s").value
			var a = document.querySelector(".a").value
				//			console.log(a)
			var xmlhttp;
			if (window.XMLHttpRequest) {
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			}
			else {
				// IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function () {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
					document.querySelector("#list").innerHTML = ""
					loadXMLDoc() 
					document.querySelector(".n").value=""
					document.querySelector(".a").value=""
				}
			}
			xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
			xmlhttp.send();
		})
	</script>
</body>

</html>